<template>
  <p class="tip-content">未注册手机号将会自动创建新的账号</p>
  <div class="iptarea">
    <div class="areanum">
      <van-icon name="arrow-down" size="0.12rem" color="#666666" />
      +86
    </div>
    <div class="iptPhone">
      <input
        type="tel"
        v-model="telphone"
        placeholder="请输入手机号"
        @blur="validatePhone"
      />
      <van-icon
        name="close"
        size="0.2rem"
        v-show="telphone"
        color="#dedede"
        @click="telphone = ''"
        style="display: block"
      />
    </div>
  </div>
  <van-button
    type="primary"
    size="large"
    block
    :color="flag ? '#b56cff' : '#999999'"
    round
    class="personSty"
    @click="nextStepYzm"
  >
    下一步</van-button
  >
  <bottomPolicy />
</template>
<script>
import { Toast } from "vant";
import bottomPolicy from "@/views/phonelogin/bottomPolicy.vue";
export default {
  components: {
    bottomPolicy,
  },
  data() {
    return {
      flag: false,
      telphone: "",
      validateMa: "",
    };
  },
  methods: {
    validatePhone() {
      const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (phoneReg.test(this.telphone)) {
        // 判断是否勾选
        // this.$store.state.botChecked ? (this.flag = true) : null;
        this.flag = true;
      } else {
        // 弹框提示
        Toast("请填写正确的手机号码");
      }
    },
    nextStepYzm() {
      if (this.$store.state.botChecked) {
        // 发送验证码 
        this.$store.commit("setPhoneNum", this.telphone); //全局存储电话
        this.$router.push("/phonelogin/telcaptcha");
      } else {
        Toast("请阅读用户协议，并同意勾选");
      }
    },
  },
};
</script>
<style scoped lang="less">
.tip-content {
  height: 0.12rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.12rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.12rem;
  margin-top: 0.24rem;
}
button.personSty {
  width: 3.35rem;
  height: 0.44rem;
  font-size: 0.14rem;
  margin: 0 auto;
  margin-top: 0.12rem;
}
.iptarea {
  display: flex;
  width: 3.35rem;
  align-items: flex-end;
  margin: 0 auto;
  border-bottom: 0.01rem solid #333;
  margin-top: 0.3rem;
  margin-bottom: 0.24rem;
  .areanum {
    color: rgb(102, 102, 102);
    font-size: 0.13rem;
    line-height: 0.22rem;
  }
  .iptPhone {
    height: 0.3rem;
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-left: 0.1rem;
    input[type="tel"] {
      height: 75%;
      display: block;
      font-size: 0.13rem;
      color: #666;
      border: none;
      flex: 1;
    }
  }
}
</style>
